<template>
  <div>
    <MyTable :arr="list">
      <!-- 头部 -->
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <!-- 主体 -->
      <template #body="scope">
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.goods_name }}</td>
        <td>{{ scope.row.goods_price }}</td>
        <td>
          <!-- input 和 button 是互斥 v-if v-else -->
          <!-- v-gfocus 是自定义指令 -->
          <input
            style="width:100px"
            v-if="scope.row.inputVisible"
            type="text"
            v-gfocus
            @blur=" scope.row.inputVisible = false "
            @keyup.enter="enterFn(scope.row)"
            @keyup.esc="scope.row.inputValue = ''"
            v-model.trim="scope.row.inputValue"
          >
          <button
            v-else
            class="btn btn-primary btn-sm"
            @click=" scope.row.inputVisible = true "
          >+Tag</button>
          <span
            v-for="(item,index) in scope.row.tags"
            :key="index"
            class="badge badge-wanning"
          >
            {{ item }}
          </span>
        </td>
        <td>
          <button
            @click="removeBtn(scope.row.id)"
            class="btn btn-danger btn-sm"
          >删除</button>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
// 目标: 循环商品列表表格
// 1. 封装MyTable.vue 整体表格组件-一套标签和样式
// 2. axios请求数据
// 3. 传入MyTable组件里循环tr显示数据

// 目标：组件插槽，允许用户自定义表格头和表格单元格内容
// 1. 提高组件==复用性和灵活性==, 把表格列标题thead部分预留<slot>标签, 设置name属性
// 2. 使用MyTable.vue时, 传入列标题标签
// 3. 表格内容td部分也可以让组件使用者自定义, 也给tbody下tr内留好<slot>标签和name属性名
// 4. 使用插槽需要用到插槽内的item对象上的数据, 使用作用域插槽技术
import MyTable from "../components/MyTable.vue";
export default {
  components: {
    MyTable,
  },
  data() {
    return {
      list: [],
    };
  },
  created() {
    // 因为在 Vue 原型上添加了 $axios，所以在组件中可通过 this.$axios 调用
    this.$axios({
      method: "GET",
      url: "/api/goods",
    }).then((res) => {
      // console.log(res);
      // 💥这里是 data.data
      this.list = res.data.data;
    });
  },
  methods: {
    removeBtn(theId) {
      // console.log('你点击了删除按钮', theId);
      // 删除方案1:
      // this.list = this.list.filter(item=> item.id !== theId)

      // 删除方案2:
      // .splice(删除的下标, 删除的个数, 新增的数据)
      //    .findIndex()   查找theId在数组中的下标
      const index = this.list.findIndex((item) => item.id === theId);
      // console.log(index);
      this.list.splice(index, 1);
    },
    enterFn(obj) {
      // console.log("按下了回车键", obj);
      if (obj.inputValue === "") {
        return alert("请输入数据");
      }
      obj.tags.push(obj.inputValue);
      obj.inputValue = "";
      // obj.inputVisible = false
    },
  },
};
</script>

<style scoped>
.badge-wanning {
  background-color: #ffc107;
  color: #000;
  margin: 0 2px;
}
</style>